<template>
  <view class="deliver-calendar">
    <calendar
      ref="calendar"
      class="calendar"
      :date="selectedDate"
      :insert="true"
      :clearDate="true"
      :range="false"
      :showSum="false"
      :readOnly="true"
      :selected="selectedDateDeliverList"
      @clickDate="clickDate"
      @confirm="confirm"
    />
    <view class="margin-cell"></view>
    <view class="deliver-calendar-list">
      <view class="deliver-calendar-header">
        <text class="deliver-calendar-header-left">
          {{selectedDate}} 星期{{getDay}}
        </text>
        <text class="deliver-calendar-header-right">
          配送数量：{{deliverNum}}
        </text>
      </view>
      <view
        v-for="(item, index) in deliverList"
        :key="index"
        class="deliver-list-item"
      > 
        <image :src="item.goodImg"></image>
        <view class="deliver-info">
          <view class="d-i-t">
            <text>{{item.goodName}}</text>
            <text>{{item.deliveryStatus === 1 ? '待配送' : '已配送'}}</text>
          </view>
          <text>数量：{{item.goodNum}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from '@/components/calendar/calendar.vue'
import { parseTime } from '@/utils/index.js'
import { mapState } from 'vuex'  
export default {
  components: {
    Calendar
  },
  data() {
    return {
      date: '',
      orderNo: '',
      // 选中的日期
      selectedDate: '2020-06-25',
      // 当天配送数量
      // deliverNum: 0,
      // deliverStatus 1:待配送；2:已配送
      selectedDateDeliverList: [
        // {
        //   date: '2020-06-25',
        //   info: '已送',
        //   deliveryStatus: 1
        // }
      ],
      type: 1, // 1:订单日历 2:个人日历
    }
  },
  computed: {
    ...mapState(['userInfo']),
    // 当天配送星期
    getDay() {
      return parseTime(this.selectedDate, '{a}')
    },
    // 当天配送数量
    deliverNum() {
      let sum = 0
      this.deliverList.map(item => {
        sum += item.goodNum
      })
      return sum
    },
    // 当天配送列表
    deliverList() {
      const deliverList = this.selectedDateDeliverList.find(item => item.date === this.selectedDate)
      return deliverList ? deliverList.deliveryItemList : []
    }
  },
  async onLoad(options) {
    this.orderNo = options.orderNo
    this.type = Number(options.type)
    const deliveryDate = options.deliveryDate
    this.initData(deliveryDate)
    this.$nextTick(() => {
      this.$refs['calendar'].open()
    })
  },
  methods: {
    // 初始化数据
    async initData(deliveryDate) {
      let deliveryPlanList
      if (this.type === 1) {
        this.selectedDate = deliveryDate.split(',')[0]
        deliveryPlanList = await this.$api.json('getOrderDeliveryPlan', { orderNo: this.orderNo })
      } else {
        this.selectedDate = deliveryDate
        deliveryPlanList = await this.$api.json('getOrderCalendar', { openId: this.userInfo.openId })
        console.log(deliveryPlanList)
      }
      const selectedDate = []
      deliveryPlanList.map((item, index) => {
        const obj = {
          date: item.deliveryDate,
          deliveryStatus: item.deliveryStatus,
          info: item.deliveryStatus === 1 ? '未配送' : '已送',
          deliveryItemList: item.deliveryItemList
        }
        selectedDate.push(obj)
      })
      this.selectedDateDeliverList = selectedDate
    },
    confirm(e) {
      console.log(e)
    },
    clickDate(e) {
      // console.log(e)
      if(e.extraInfo.date) {
        this.selectedDate = e.extraInfo.date
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  page {
    background-color: #f2f2f2;
    min-height: 100%;
    display: flex;
  }
  .deliver-calendar {
    display: flex;
    flex-direction: column;
    flex: 1;
    .calendar {
      flex-shrink: 0;
    }
  }
  .margin-cell {
    width: 100%;
    height: 20rpx;
    background-color: #f2f2f2;
  }
  .deliver-calendar-list {
    background-color: #ffffff;
    padding: 0 40rpx;
    flex: 1;
    flex-shrink: 0;
    .deliver-list-item {
      border: 1rpx solid #ddd;
      width: 100%;
      height: 200rpx;
      padding: 20rpx;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 40rpx;
      }
      .deliver-info {
        height: 140rpx;
        display: flex;
        justify-content: space-between;
        font-size: $font-sm;
        color: $font-color-base;
        flex-direction: column;
      }
      .d-i-t {
        width: 400rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .deliver-calendar-header {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: $font-sm;
    color: $font-color-dark;
  }

</style>
